<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>

</head>

<body>
<div class="x-body" style="position: absolute;left:20%;top:5%">

    <form class="layui-form">

        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-upload" >
                    <input type="hidden" name="userPhoto" class="image" id="userPhoto">
                    <div class="layui-upload-list" >
                        <button type="button" class="layui-btn" id="test1">上传头像</button>
                        <img class="layui-upload-img" id="demo1" width="200" height="100" name="userPhoto">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">

            <label for="userName" class="layui-form-label">
                <span class="x-red">*</span>登录名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userName" name="userName" required="" lay-verify="userName"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>将会成为您唯一的登入名
            </div>

            <label for="name" class="layui-form-label" >
                <span class="x-red">*</span>姓名
            </label>
            <div class="layui-input-inline" mar>
                <input type="text" id="name" name="name" required="" lay-verify="name"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>用户真实姓名
            </div>

        </div>

        <div class="layui-form-item">

            <label for="userBir" class="layui-form-label">
                <span class="x-red">*</span>出生日期
            </label>
            <div class="layui-input-inline">
                <input type="date" id="userBir" name="userBir" required="" lay-verify="userBir"
                       autocomplete="off" class="layui-input">
            </div>

            <label for="userManager" class="layui-form-label" style="margin-left: 150px" >
                <span class="x-red">*</span>用户经理
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userManager" name="userManager" required=""  lay-verify="userManager"
                       autocomplete="off" class="layui-input">
            </div>

        </div>

        <div class="layui-form-item">
            <label for="userTel" class="layui-form-label">
                <span class="x-red">*</span>电话号码
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userTel" name="userTel" required="" lay-verify="phone"
                       autocomplete="off" class="layui-input">
            </div>

            <label for="userEmail" class="layui-form-label"  style="margin-left: 150px" >
                <span class="x-red">*</span>邮箱
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userEmail" name="userEmail" required=""  lay-verify="userEmail"
                       autocomplete="off" class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <label for="userEdu" class="layui-form-label" >
                <span class="x-red">*</span>学历
            </label>
            <div class="layui-input-inline" >
                <select name="userEdu" id="userEdu">
                    <option  value=""  > <span></span></option>
                    <option value="小学">小学</option>
                    <option value="初中">初中</option>
                    <option value="高中">高中</option>
                    <option value="本科">本科</option>
                    <option value="硕士">硕士</option>
                    <option value="博士">博士</option>
                </select>
            </div>

            <label for="userUnit" class="layui-form-label"  style="margin-left: 150px"  >
                <span class="x-red">*</span>工作单位
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userUnit" name="userUnit" required=""  lay-verify="userUnit"
                       autocomplete="off" class="layui-input">
            </div>

        </div>


        <div class="layui-form-item">



            <label for="L_repass" class="layui-form-label"   >
                <span class="x-red">*</span>确认密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="L_repass" name="surePwd" required="" lay-verify="repass"
                       autocomplete="off" class="layui-input">
            </div>

            <label for="userIdCard" class="layui-form-label"  style="margin-left: 150px" >
                <span class="x-red">*</span>身份证号
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userIdCard" name="userIdCard" required=""  lay-verify="userIdcard"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">

            </div>
        </div>



        <div class="layui-form-item">
            <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="L_pass" name="userPwd" required="" lay-verify="pass"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>3到16个字符
            </div>



            <label for="userText" class="layui-form-label" style="margin-left: 70px" >
                备注
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userText" name="userText" required="" style="width: auto;min-width: 190px"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">

            <label for="userSex" class="layui-form-label" >
                <span class="x-red">*</span>性别
            </label>
            <div class="layui-input-block" id="userSex" name="userSex"   >
                <input type="radio" name="userSex" value="男" title="男"  >
                <input type="radio" name="userSex" value="女" title="女"  checked="" >
            </div>

        </div>

        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="" style="margin-left: 250px">
                注册
            </button>
        </div>
        <span id="info" style="color:red"></span>
    </form>
</div>
<script>
    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;

        //自定义验证规则
        form.verify({
            userName: function(value){
                if(value.length < 2){
                    return '昵称至少得3个字符啊';
                }
            }
            ,pass: [/(.+){3,12}$/, '密码必须3到12位']






            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
            ,userIdcard: [/^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$$/,'请输入正确身份证号']
            ,clientUnit: function(value){
                if(value.length < 2){
                    return '工作单位至少得2个字符';
                }
            }
            ,userBir: function(value){
                if(value.length ==0){
                    return '出生日期不能为空';
                }
            }
        });
        //
        layui.use('upload', function(){
            var $ = layui.jquery
                ,upload = layui.upload;
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'//鼠标点击事件绑定元素
                ,url: '/upload' //服务端地址
                ,accept:'url' // 上传的文件类型
                ,size:50000
                ,before: function(obj){//不管上传成功还是失败，都需要执行的函数
                    obj.preview(function(index, file, result){
                        //显示上传图片
                        $('#demo1').attr('src', result);
                    });
                }
                ,done: function(res){//访问服务端后执行的函数
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #4cae4c;">上传成功</span>');
                    var fileupload = $(".image");
                    //把图片在项目中的路径存入到 属性 class=image的input框中
                    fileupload.attr("value",res.src);
                    console.log(fileupload.attr("value"));
                    //等同于
                    $("#url").val(res.src);
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });
        });


        //监听提交
        form.on('submit(add)', function(data){
            console.log(data);
            $.ajax({
                url:"/login/zhuce",
                type:"post",
                data:data.field,
                dataType:"json",//返回的数据类型
                success:function (data) {
                    //定义{info:"sucess"}
                    $("#info").text(data.info);
                    //如果注册成功就跳转到登录页面
                    if(data.info=="注册成功"){
                        window.location.href="/login/loginpage";
                    }
                }
            })
            return false;
        });


    });
</script>
<script>var _hmt = _hmt || []; (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>